<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="never">
          <div slot="header">
            <span>用户操作审计图</span>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="userAudit"
          />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="never" style="min-height: 50%">
          <div slot="header">
            <span>视频操作审计图</span>
          </div>
          <vab-chart
            :autoresize="true"
            theme="vab-echarts-theme"
            :options="videoAudit"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'
  import { userAuditgetList, videoAuditgetList } from '@/api/audit'
  export default {
    name: 'Index',
    components: {
      VabChart,
    },
    data() {
      return {
        userAudit: {
          legend: {
            data: ['视频数量', '文本修改次数', '视频修改次数'],
          },
          grid: {
            top: '10%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
            },
          ],
          series: [
            {
              name: '视频数量',
              type: 'bar',
              emphasis: {
                focus: 'series',
              },
              data: [],
            },
            {
              name: '文本修改次数',
              type: 'bar',
              data: [],
            },
            {
              name: '视频修改次数',
              type: 'bar',
              data: [],
            },
          ],
        },
        videoAudit: {
          legend: {
            data: ['文本数量', '文本修改次数'],
          },
          grid: {
            top: '10%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: [
            {
              type: 'category',
              /*boundaryGap: false,*/
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '文本数量',
              type: 'bar',
              emphasis: {
                focus: 'series',
              },
              data: [],
            },
            {
              name: '文本修改次数',
              type: 'bar',
              data: [],
            },
          ],
        },
        queryForm: {
          name: '',
          pageNo: 1,
          pageSize: 10,
        },
      }
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      async fetchData() {
        const query = await userAuditgetList(this.queryForm)
        let data = query.data
        let temp = []
        let myx = []
        let vsum = []
        let tedit = []
        let vedit = []
        temp = data.data
        for (let i = 0; i < temp.length; i++) {
          myx.push(temp[i].realname)
          vsum.push(temp[i].videoCount)
          tedit.push(temp[i].textEditTimes)
          vedit.push(temp[i].videoEditTimes)
        }
        this.userAudit.xAxis[0].data = myx
        this.userAudit.series[0].data = vsum
        this.userAudit.series[1].data = tedit
        this.userAudit.series[2].data = vedit
        const videoQuery = await videoAuditgetList(this.queryForm)
        let videoData = videoQuery.data
        let textSum = []
        let editTimes = []
        let xdata = []
        let ls = videoData.data
        for (let i = 0; i < ls.length; i++) {
          xdata.push(ls[i].videoName)
          textSum.push(ls[i].textCount)
          editTimes.push(ls[i].editTimes)
        }
        this.videoAudit.xAxis[0].data = xdata
        this.videoAudit.series[0].data = textSum
        this.videoAudit.series[1].data = editTimes
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 305px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 405px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
